<!--
@Descripttion 文本域
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import FTextareaDialog from '@/components/form/f-textarea-dialog'
  注册组件
    components: {
      FTextareaDialog
    }
  使用
    <FTextareaDialog v-model.trim="xxx" />
    <FTextareaDialog v-model.trim="xxx" :maxlength="100" width="220px" :disabled="false" placeholder="请输入" />
    width       String  默认值(220px)     文本框宽度
    maxlength   Number  默认值(100)       可输入长度
    disabled    Boolean 默认值(false)     是否失效
    placeholder String  默认值(请输入)     默认占位文本
 -->
<template>
  <div :style="`width: ${width}`" class="ellipsis">
    <i class="c-primary el-icon-edit cursor-p" @click="winShow = true"></i>
    <el-tooltip class="item" effect="dark" :content="value" placement="top-start">
      <font>{{value}}</font>
    </el-tooltip>
    <el-dialog :title="$t('placeholder.Please enter')" :visible.sync="winShow" width="400px" append-to-body>
      <FTextarea v-model.trim="winValue" :maxlength="maxlength" :disabled="disabled" :placeholder="placeholder" width="100%" minRows="5"/>
      <span slot="footer">
        <!-- <el-button type="primary" @click="winShow = false">{{$t('button.Cancel')}}</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FTextarea from '@/components/form/f-textarea'

export default {
  name: 'f-textarea-dialog',
  // 组件
  components: {
    FTextarea
  },
  props: {
    value: {
      required: true
    },
    // 可输入长度
    maxlength: {
      type: Number,
      default: 100
    },
    // 文本框宽度
    width: {
      type: String,
      default: '220px'
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.Please enter')
      }
    }
  },
  data() {
    return {
      winShow: false,
      winValue: ''
    }
  },
  watch: {
    // 监听加载状态
    winValue: {
      handler(newValue, oldValue) {
        this.changeVal(newValue)
      }
    }
  },
  methods: {
    changeVal(value) {
      this.$emit('input', value)
    }
  }
}
</script>
<style lang="less" scoped>
  .el-textarea /deep/.el-input__count{
    line-height: 1em;
  }
  .el-icon-edit {
    font-size: 20px;
  }
</style>
